<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三大特性</title>
    <style>
        /* 1.层叠性，哪个离着近，那个就是属性就被使用 */
        /* div {
            color: red;

        }

        div {
            color: blue;
        } */
        /* 2.继承性，子元素可以继承父元素的样式，（text，font-，line-元素开头的可以继承，以及color） */
        /* body {
            color: pink;
            /* 斜杠后面的数值是指在自己对应样式中，行高=字体像素*数值 */
        /* font: 16px/1.5 '宋体';
        }

        div {
            text-decoration: line-through;
            font-size: 16px;
        }

        p {
            font-size: 12px;
        } */

        /* 3.优先级 */
        /* !inportant>行内样式style>ID选择器>类选择器>元素选择器>继承和全部选择器  */
        /* div {
            color: red !important;
        }

        .test {
            color: blue;

        }

        #color {
            color: yellow;
        } */

        #father {
            color: black;
        }

        div {
            color: red;
        }

        p {
            color: blue;
        }

        body {
            color: brown;
        }

        a {
            color: green;
        }

        /* 优先级有0001 */
        li {
            color: red;
        }

        /* 优先级是0001+0001=0002 */
        ul li {
            color: blue;
        }
    </style>
</head>

<body>
    <!-- <div class="test" id="color" style="color: green;">
        1111111
    </div> -->
    <div id="father">
        <p>
            name
        </p>
    </div>
    <!-- 浏览器给a默认了颜色为蓝色，有下划线，所以需要再自己手动添加代码修改 -->
    <a href="#">111111</a>

    <!-- 适当需要计算优先级权重 -->
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
</body>

</html>